<template>
	<view class="register">
		<u-navbar :back-icon-size="50" :custom-back="goback"></u-navbar>
		<view class="welcome">
			<view class="weltop"><text>注册</text></view>
			<view class="welbot"><text>请填写真实姓名</text></view>
		</view>
		<view class="register_ipt">
			<u-form :model="form" ref="regForm" :border-bottom="false" :label-width="0">
				<u-form-item prop="username" :border-bottom="false">
					<u-input placeholder="姓名" :height="height" :trim="trim" :clearable="clearable" :custom-style="iptsty" v-model="form.username" type="text" :border="border" />
				</u-form-item>
				<u-form-item prop="phone" :border-bottom="false">
					<u-input
						placeholder="手机号"
						:height="height"
						:trim="trim"
						:clearable="clearable"
						:cursor-spacing="100"
						:custom-style="iptsty"
						v-model="form.phone"
						type="number"
						:border="border"
					/>
				</u-form-item>
				<u-form-item prop="password" :border-bottom="false">
					<u-input
						placeholder="密码"
						:height="height"
						:trim="trim"
						:clearable="clearable"
						:cursor-spacing="100"
						:password-icon="true"
						:custom-style="iptsty"
						v-model="form.password"
						type="password"
						:border="border"
					/>
				</u-form-item>
				<u-form-item prop="invitation" :border-bottom="false">
					<u-input
						placeholder="邀请码"
						:height="height"
						:trim="trim"
						:clearable="clearable"
						:cursor-spacing="100"
						:custom-style="iptsty"
						v-model="form.invitation"
						type="text"
						:border="border"
					/>
				</u-form-item>
				<u-form-item prop="sms" :border-bottom="false">
					<view class="sms u-flex u-col-center">
						<u-input
							placeholder="验证码"
							:height="height"
							:trim="trim"
							:clearable="clearable"
							:cursor-spacing="100"
							:custom-style="{
								backgroundColor: '#F8F8F8'
							}"
							v-model="form.sms"
							type="text"
							:border="border"
						/>
						<u-image style="margin-left:16rpx" width="372rpx" height="90rpx" @click="getValidateCode" :fade="true" :src="smsimg" mode="widthFix"></u-image>
					</view>
				</u-form-item>
				<u-form-item prop="phonesms" :border-bottom="false">
					<view class="u-flex u-row-between">
						<u-input
							placeholder="短信验证码"
							:height="height"
							:trim="trim"
							:clearable="clearable"
							:cursor-spacing="100"
							:custom-style="{
								backgroundColor: '#F8F8F8',
								width: '330rpx'
							}"
							v-model="form.phonesms"
							type="text"
							:border="border"
						/>
						<view class="u-p-l-20">
							<u-toast ref="uToast"></u-toast>
							<u-verification-code :seconds="seconds" change-text="X秒后重新获取" ref="uCode" @change="codeChange"></u-verification-code>
							<u-button @click="getCode" @tap="getCode">{{ tips }}</u-button>
						</view>
					</view>
				</u-form-item>
			</u-form>
			<u-modal v-model="isshow" :show-cancel-button="true" :content="content" @confirm="doregiste" @cancel="isshow = false"></u-modal>
			<u-button
				class="u-m-t-30"
				size="default"
				:ripple="true"
				:hair-line="false"
				:disabled="disabled"
				:custom-style="{
					color: '#333333',
					backgroundColor: disabled == true ? '#DFDFDF' : '#FFDB28',
					border: 'none'
				}"
				@click="isshow = true"
			>
				注 册
			</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			disabled: true,
			isshow: false,
			content: '您选择注册的是 乐推招商系统,请认真确认所填信息是否正确?',
			seconds: 60,
			tips: '',
			// refCode null,
			value: '',
			clearable: false,
			trim: true,
			border: false,
			height: 90,
			iptsty: {
				backgroundColor: '#F8F8F8'
				// marginBottom: '28rpx'
			},
			smsimg: '',
			form: {
				username: '',
				password: '',
				invitation: '',
				phone: '',
				phonesms: '',
				sms: '',
				codeid: ''
			},
			rules: {
				username: [
					{
						required: true,
						min: 2,
						message: '请输入姓名',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					},
					{
						min: 8,
						max: 20,
						message: '密码长度在8-20个字符之间',
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							return !this.$u.test.digits(value);
						},
						trigger: 'blur',
						message: '密码不能为纯数字'
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '请输入正确格式的手机号码',
						trigger: 'blur'
					}
				],
				invitation: [
					{
						required: true,
						message: '请输入邀请码',
						trigger: 'blur'
					}
				],
				sms: [
					{
						required: true,
						message: '请输入右侧验证码',
						trigger: 'blur'
					},
					{
						min: 5,
						max: 5,
						message: '请输入5位的图形验证码',
						trigger: 'blur'
					},
					{
						pattern: /^[0-9a-zA-Z]*$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '只能包含字母或数字',
						trigger: 'blur'
					}
				],
				phonesms: [
					{
						required: true,
						message: '请输入手机验证码',
						trigger: 'blur'
					},
					{
						min: 6,
						max: 6,
						message: '请输入6位的手机验证码',
						trigger: 'blur'
					},
					{
						pattern: /^[0-9]*$/g,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						message: '只能包含数字',
						trigger: 'blur'
					}
				]
			}
		};
	},
	watch: {
		'form.username': function(val) {
			// console.log(this.form.username);
			if (val !== '') {
				if (this.form.password !== '' && this.form.sms.length == 5 && this.form.invitation !== '' && this.form.phone.length == 11 && this.form.phonesms.length == 6) {
					this.disabled = false;
				}
			} else {
				this.disabled = true;
			}
		},
		'form.password': function(val) {
			// console.log(this.form.password);
			if (val !== '') {
				if (this.form.username !== '' && this.form.sms.length == 5 && this.form.invitation !== '' && this.form.phone.length == 11 && this.form.phonesms.length == 6) {
					this.disabled = false;
				}
			} else {
				this.disabled = true;
			}
		},
		'form.invitation': function(val) {
			// console.log(this.form.invitation);
			if (val !== '') {
				if (this.form.password !== '' && this.form.sms.length == 5 && this.form.username !== '' && this.form.phone.length == 11 && this.form.phonesms.length == 6) {
					this.disabled = false;
				}
			} else {
				this.disabled = true;
			}
		},
		'form.phone': function(val) {
			// console.log(this.form.phone);
			if (val.length == 11) {
				if (this.form.password !== '' && this.form.sms.length == 5 && this.form.invitation !== '' && this.form.username !== '' && this.form.phonesms.length == 6) {
					this.disabled = false;
				}
			} else {
				this.disabled = true;
			}
		},
		'form.phonesms': function(val) {
			// console.log(this.form.phonesms);
			if (val.length == 6) {
				if (this.form.password !== '' && this.form.sms.length == 5 && this.form.invitation !== '' && this.form.phone.length == 11 && this.form.username !== '') {
					this.disabled = false;
				}
			} else {
				this.disabled = true;
			}
		},
		'form.sms': function(val) {
			// console.log(this.form.sms);
			if (val.length == 5) {
				if (this.form.password !== '' && this.form.username !== '' && this.form.invitation !== '' && this.form.phone.length == 11 && this.form.phonesms.length == 6) {
					this.disabled = false;
				}
			} else {
				this.disabled = true;
			}
		}
	},
	onReady() {
		this.getValidateCode();
		this.$refs.regForm.setRules(this.rules);
	},
	methods: {
		// 获取图形验证码
		getValidateCode() {
			this.$u.api.getValidateCode().then(res => {
				// console.log(res)
				if (res.data) {
					this.smsimg = res.data.pic.replace(/[\r\n]/g, '');
					this.form.codeid = res.data.key;
				} else {
					this.$u.toast('请求出现错误!');
				}
			});
		},
		goback: function() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			});
		},
		codeChange: function(text) {
			this.tips = text;
		},
		getCode: function() {
			if (this.$refs.uCode.canGetCode) {
				if (this.form.phone.length == 11 && this.form.sms.length == 5 && this.form.codeid !== '') {
					uni.showLoading({
						title: '正在获取验证码'
					});
					this.$u.api
						.getSmsCode({
							phone: this.form.phone,
							code_id: this.form.codeid,
							code: this.form.sms
						})
						.then(res => {
							console.log(res);
							uni.hideLoading();
							this.$u.toast('验证码已发送!');
							this.$refs.uCode.start();
						});
				} else {
					this.$u.toast('请先填写手机号和图形验证码');
				}
			} else {
				this.$u.toast('请在倒计时结束后再获取');
			}
		},
		doregiste: function() {
			console.log(this.form);
			this.$refs.regForm.validate(valid => {
				if (valid) {
					this.$u.api
						.doregister({
							mobile: this.form.phone,
							pass: this.form.password,
							code_id: this.form.codeid,
							code: this.form.sms,
							user: this.form.username,
							invitation_code: this.form.invitation,
							phone_code: this.form.phonesms
						})
						.then(res => {
							// console.log(res);
							this.isshow = false;
							this.form={};
							this.$refs.regForm.resetFields();
							uni.navigateTo({
								url: '/pages/login/login?register=1',
								animationType: 'pop-in',
								animationDuration: 200
							});
						})
						.catch(err => {
							console.log(err);
							this.getValidateCode();
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error'
							});
						});
				} else {
					console.log('验证失败');
				}
			});
		}
	}
};
</script>

<style lang="scss">
.register {
	.welcome {
		color: rgba(16, 16, 16, 1);
		font-size: 52rpx;
		text-align: left;
		padding-top: 76rpx;
		padding-left: 56rpx;
		padding-bottom: 90rpx;
		font-weight: bolder;
		.welbot {
			margin-top: 10rpx;
			font-size: 26rpx;
			color: #999999;
			font-weight: 300;
		}
	}
	.register_ipt::v-deep {
		width: 640rpx;
		margin: 0 auto;
		.uni-input-placeholder {
			left: 36rpx;
		}
		.uni-input-input {
			text-indent: 35rpx;
		}
		/* #ifdef MP */
		.u-input .u-input__input {
			display: block;
			padding-left: 36rpx !important;
		}
		/* #endif */
	}
	.u-form-item {
		padding: 0;
		padding-bottom: 25rpx;
	}
	.u-form-item__message {
		padding-left: 36rpx !important;
	}
	.u-form-item--left {
		display: none;
	}
	/* #ifdef MP */
	.u-form-item--left {
		display: none !important;
	}
	/* #endif */
	.footer {
		width: 640rpx;
		margin-top: 200rpx;
		margin-left: 90rpx;
		color: rgba(120, 120, 130, 1);
		font-size: 26rpx;
		// text-align: left;
	}
}
</style>
